import React, { FC,useRef } from 'react'
import styles from './StatHeader.module.scss'
import { useNavigate,useParams } from 'react-router-dom'
import { Space,Button,Typography,Input,Tooltip,message,Popover } from 'antd'
import type { InputRef } from 'antd'
import { LeftOutlined,CopyOutlined, QrcodeOutlined } from '@ant-design/icons'
import useGetPageInfo from '../../../hooks/useGetPageInfo.ts'
// import QRCode from 'qrcode.react' 这是旧版本
import { QRCodeSVG } from 'qrcode.react'
const { Title } = Typography
const StatHeader:FC = ()=>{
    const nav = useNavigate()
    const {id} = useParams()
    const {title,isPublished} = useGetPageInfo()
    // 拷贝链接
    const urlInputRef = useRef(null)
    const copy = ()=>{
        const elem = urlInputRef.current
        if(elem == null) return
        elem.select()
        document.execCommand('copy') // 拷贝选中的内容
        message.success('拷贝成功')
    }
    const getLinkAndQRCodeElem = ()=>{
        if(!isPublished) return null
        const url = `http://localhost:3000/question/${id}` // 得考虑C端得规则

        // 定义二维码组件
        const QRCodeElem = <div style={{textAlign:'center'}}>
            <QRCodeSVG value={url} size={150}/>
        </div>
        return <Space>
            <Input value={url} style={{ width:'300px' }} ref={urlInputRef} />
            <Tooltip title='拷贝链接'>
                <Button icon={<CopyOutlined />} onClick={copy}></Button>
            </Tooltip>
            <Popover content={QRCodeElem}>
                <Button icon={<QrcodeOutlined />}></Button>
            </Popover>
        </Space>
    }

    return <div className={styles['header-wrapper']}>
        <div className={styles.header}>
            <div className={styles.left}>
                <Space>
                    <Button type="link" icon={<LeftOutlined />} onClick={()=>nav(-1)}>返回</Button>
                    <Title style={{marginBottom:'10px'}}>{title}</Title>
                </Space>
            </div>
            <div className={styles.main}>{getLinkAndQRCodeElem()}</div>
            <div className={styles.right}>
                <Button type="primary" onClick={()=> nav(`/question/edit/${id}`)}>编辑问卷</Button>
            </div>
        </div>
    </div>
}

export default StatHeader